<template>
  <div class="welcome-container">
    <div class="snow">
      <el-avatar :src="avatar" :size="150" class="avatar"></el-avatar>
      <div class="synopsis">{{words}}</div>
    </div>
  </div>
</template>

<script>
import image from '@/assets/images/avatar.gif'
import {defineComponent,ref} from 'vue';
export default defineComponent({
  name: "Welcome",
  setup(){
    const avatar = image
    const str = "　　程序员，年二十有五，始从文，连考而不中，遂习武，练武场上发一矢，中鼓吏，逐之出。改学IT，自撰一函数，用之，堆栈溢出。"
    const letters = str.split("")
    const words =ref("")
    function write(){
      for(let i=0;i<letters.length;i++){
        setTimeout(()=>{
          // words.push(letters[i])
          words.value = words.value+letters[i]
        },i*100);
      }
    }
    setTimeout(()=>{
      write()
    },2000)
    return {
      avatar,
      words
    }
  }
})
</script>

<style scoped lang="scss">
.welcome-container {
  width: 100%;
  height: 100%;
  .snow{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: 10s snow linear infinite;
    background: url("../assets/images/snow1.png"),url("../assets/images/snow2.png");
    .avatar{
      margin-top: 200px;
      animation: bounceInLeft 2s;
    }
    .synopsis{
      width: 400px;
      font-size: 18px;
      color: #ffffff;
      font-weight: bold;
      margin-top: 20px;
    }
    @keyframes bounceInLeft {
      0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
      }
      60% {
        opacity: 0.5;
        transform: translate3d(25px, 0, 0);
      }
      75% {
        opacity: 0.7;
        transform: translate3d(10px, 0, 0);
      }
      90% {
        opacity: 0.8;
        transform: translate3d(5px, 0, 0);
      }
      100% {
        transform: none;
      }
    }

    @keyframes snow{
      0% {
        background-position: 0 0, 0 0;
      }
      100% {
        background-position: 500px 500px, 1000px 500px;
      }
    }
  }

}
</style>